<template>
  <div class="renthoust">
    <div class="main">
      <div class="search_home">
        <van-icon name="arrow-left" @click="()=>{this.$router.go(-1)}" />
          <div class="search">
            <div class="city" @click="()=>{this.$router.push('/citylist')}">{{city}}</div>
            <div class="sera">
                  <van-icon name="search" />
                <span>请输入小区或地址</span>
            </div>
          </div>
        <van-icon name="location-o" @click="()=>{this.$router.push('/map')}" />
      </div>
      <div class="selectList">
        <van-dropdown-menu>
          <van-dropdown-item title="区域" ref="item" :loading="loading">
            <van-picker
              show-toolbar
              :columns="columns"
              confirm-button-text=" "
              cancel-button-text=" "
            />
            <div class="btn"><button>取消</button> <button>确认</button></div>
          </van-dropdown-item>
          <van-dropdown-item title="方式" ref="item" :loading="loading">
            <van-picker
              show-toolbar
              :columns="way"
              confirm-button-text=" "
              cancel-button-text=" "
            />
            <div class="btn"><button>取消</button> <button>确认</button></div>
          </van-dropdown-item>
          <van-dropdown-item title="租金" ref="item" :loading="loading">
            <van-picker
              show-toolbar
              :columns="pricelist"
              confirm-button-text=" "
              cancel-button-text=" "
            />
            <div class="btn"><button>取消</button> <button>确认</button></div>
          </van-dropdown-item>
          <van-dropdown-item title="筛选" @open="()=>{this.show = !this.show}" >
            <van-popup v-model="show" get-container="body" position="right" :style="{width:'80%', height: '100%' }">
            </van-popup>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
      <div class="dlInner">
        <dl v-for="(v, i) in dataList" :key="i" @click="detail(v)">
          <dt>
            <img :src="'http://47.102.145.189:8009' + v.houseImg" alt="" />
          </dt>
          <dd>
            <p>{{ v.title }}</p>
            <p>{{ v.desc }}</p>
            <p>
              <span v-for="(item, index) in v.tags" :key="index">{{
                item
              }}</span>
            </p>
            <p class="price">{{ v.price }} 元/月</p>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      val: '',
      value1: 0,
      value2: 'a',
      value: 0,
      switch1: false,
      switch2: false,
      show: false,
      loading: true,
      dataList: [],
      columns: [],
      way: [],
      pricelist: []
    }
  },
  computed: {
    ...mapState(['city', 'valueId'])
  },
  methods: {
    ...mapMutations(['setRecord']),
    // 方式
    changeWay (e) {
      console.log(e)
    },
    // 详情
    detail (item) {
      this.$router.push({ path: '/detail', query: { id: item.houseCode } })
      this.setRecord(item)
    },
    getList () {
      this.$http.get(`/houses?cityId=${this.valueId}`).then((res) => {
        if (res.data.status === 200) {
          this.dataList = res.data.body.list
        }
      })
    },
    getCondition () {
      this.$http.get('/houses/condition', { params: { id: this.valueId } }).then(res => {
        console.log(res)
        const area = res.data.body.area
        const subway = res.data.body.subway
        this.columns.push(area)
        this.columns.push(subway)
        res.data.body.rentType.map(v => {
          this.way.push(v.label)
        })
        res.data.body.price.map(v => {
          this.pricelist.push(v.label)
        })
      })
    }
  },
  created () {
    setTimeout(() => {
      this.loading = false
    }, 1000)
    this.getCondition()
    this.getList()
    // this.getArea()
  }
}
</script>

<style scoped lang='scss'>
.renthoust {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  .main {
    flex: 1;
    overflow: scroll;
    position: relative;
    .selectList {
      width: 100%;
      height: 50px;
      position: sticky;
      top: 0px;
    }
    .btn {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      button {
        border: none;
        outline: none;
      }
      :nth-child(1) {
        width: 40%;
        height: 100%;
        background: none;
        color: rgb(88, 181, 127);
      }
      :nth-child(2) {
        width: 60%;
        height: 100%;
        background: rgb(88, 181, 127);
        color: white;
      }
    }
  }
}
.search_home{
  width: 100%;
  height: 50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .search{
    flex: 1;
    height: 35px;
    margin: 0 10px;
    padding: 5px 5px 5px 8px;
    background: #fff;
    border-radius: 5px;
    font-size: 0.13rem;
    display: flex;
    align-items: center;
    .sera{
      display: flex;
      margin-left: 12px;
      padding-left: 12px;
      border-left: 1px solid #ccc;
      align-items: center;
      color: dimgray;
    }
  }
  >.van-icon{
    font-size: 1rem;
  }
}
.price {
  color: red;
}
.dlInner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  dl {
    width: 100%;
    display: flex;
    padding: 5px 10px;
    border-bottom: 1px solid gray;
    dt {
      width: 110px;
      height: 100%;
      margin-right: 15px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    dd {
      display: flex;
      flex-direction: column;
      :nth-child(1) {
        font-weight: bold;
        font-size: 14px;
        margin: 4px 0px;
      }
      :nth-child(2) {
        font-size: 12px;
        margin: 4px 0px;
      }
      :nth-child(3) {
        margin: 4px 0px;
        span {
          font-size: 12px;
          display: inline-block;
          background: rgb(229, 244, 237);
          color: rgb(103, 190, 144);
          padding: 2px;
          border-radius: 19px;
        }
      }
      :nth-child(4) {
        font-size: 14px;
        margin: 4px 0px;
      }
    }
  }
}
</style>
